<template>
  <div class="article-list">
    <div class="page-header">
      <h1 class="page-title">文章管理</h1>
      <div class="page-actions">
        <router-link to="/admin/articles/create" class="create-btn primary-btn">
          <i class="fas fa-plus"></i> 写文章
        </router-link>
      </div>
    </div>
    
    <div class="filter-bar">
      <div class="search-box">
        <input type="text" placeholder="搜索文章..." v-model="searchQuery" @input="filterArticles">
        <i class="fas fa-search"></i>
      </div>
      <div class="filter-controls">
        <select v-model="categoryFilter" @change="filterArticles">
          <option value="">所有分类</option>
          <option v-for="category in categories" :key="category.id" :value="category.id">
            {{ category.name }}
          </option>
        </select>
        <select v-model="statusFilter" @change="filterArticles">
          <option value="">所有状态</option>
          <option value="published">已发布</option>
          <option value="draft">草稿</option>
        </select>
        <select v-model="sortBy" @change="filterArticles">
          <option value="newest">最新发布</option>
          <option value="oldest">最早发布</option>
          <option value="title">标题</option>
          <option value="views">浏览量</option>
        </select>
      </div>
    </div>
    
    <div class="article-table-container">
      <table class="article-table" v-if="filteredArticles.length > 0">
        <thead>
          <tr>
            <th class="title-col">标题</th>
            <th class="category-col">分类</th>
            <th class="date-col">发布日期</th>
            <th class="status-col">状态</th>
            <th class="stats-col">统计</th>
            <th class="actions-col">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="article in filteredArticles" :key="article.id">
            <td class="title-col">
              <div class="article-info">
                <div v-if="article.coverImage" class="article-image">
                  <img :src="article.coverImage" :alt="article.title">
                </div>
                <div class="article-details">
                  <div class="article-title">{{ article.title }}</div>
                  <div class="article-tags">
                    <span v-for="(tag, index) in article.tags" :key="index" class="tag">{{ tag }}</span>
                  </div>
                </div>
              </div>
            </td>
            <td class="category-col">
              <span class="category-badge">{{ getCategoryName(article.categoryId) }}</span>
            </td>
            <td class="date-col">
              {{ formatDate(article.publishTime) }}
            </td>
            <td class="status-col">
              <span class="status-badge" :class="article.status">
                {{ article.status === 'published' ? '已发布' : '草稿' }}
              </span>
            </td>
            <td class="stats-col">
              <div class="stats-info">
                <div class="stat-item">
                  <i class="fas fa-eye"></i> {{ article.views || 0 }}
                </div>
                <div class="stat-item">
                  <i class="fas fa-comment"></i> {{ article.comments || 0 }}
                </div>
              </div>
            </td>
            <td class="actions-col">
              <div class="action-buttons">
                <router-link :to="`/admin/articles/edit/${article.id}`" class="edit-btn">
                  <i class="fas fa-edit"></i>
                </router-link>
                <button class="preview-btn" @click="previewArticle(article)">
                <i class="fas fa-eye"></i>
              </button>
                <button class="delete-btn" @click="deleteArticle(article)">
                <i class="fas fa-trash-alt"></i>
              </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      
      <div class="empty-state" v-else>
        <i class="fas fa-file-alt"></i>
        <p>没有找到符合条件的文章</p>
        <router-link to="/admin/articles/create" class="primary-btn">写第一篇文章</router-link>
      </div>
    </div>
    
    <div class="pagination" v-if="totalPages > 1">
      <button 
        class="page-btn prev" 
        :disabled="currentPage === 1"
        @click="changePage(currentPage - 1)"
      >
        <i class="fas fa-chevron-left"></i> 上一页
      </button>
      
      <div class="page-numbers">
        <button 
          v-for="page in displayedPages" 
          :key="page" 
          class="page-number" 
          :class="{ active: currentPage === page }"
          @click="changePage(page)"
        >
          {{ page }}
        </button>
      </div>
      
      <button 
        class="page-btn next" 
        :disabled="currentPage === totalPages"
        @click="changePage(currentPage + 1)"
      >
        下一页 <i class="fas fa-chevron-right"></i>
      </button>
    </div>
    
    <!-- 文章预览模态框 -->
    <div class="modal" v-if="previewArticleData">
      <div class="modal-backdrop" @click="previewArticleData = null"></div>
      <div class="modal-content preview-modal">
        <div class="modal-header">
          <h3>文章预览</h3>
          <button class="close-btn" @click="previewArticleData = null">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <h1 class="preview-title">{{ previewArticleData?.title }}</h1>
          <div class="preview-meta">
            <span class="preview-category">{{ getCategoryName(previewArticleData?.categoryId) }}</span>
            <span class="preview-date">{{ formatDate(previewArticleData?.publishTime) }}</span>
          </div>
          <div class="preview-tags">
            <span v-for="(tag, index) in previewArticleData?.tags" :key="index" class="tag">{{ tag }}</span>
          </div>
          <div class="preview-content markdown-body" v-html="renderedPreviewContent"></div>
        </div>
        <div class="modal-footer">
          <router-link :to="`/admin/articles/edit/${previewArticleData?.id}`" class="primary-btn">
            <i class="fas fa-edit"></i> 编辑文章
          </router-link>
          <a :href="`/blog/article/${previewArticleData?.id}`" target="_blank" class="secondary-btn">
            <i class="fas fa-external-link-alt"></i> 查看前台页面
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { marked } from 'marked';
import hljs from 'highlight.js';

export default {
  name: 'ArticleList',
  data() {
    return {
      articles: [],
      filteredArticles: [],
      categories: [],
      searchQuery: '',
      categoryFilter: '',
      statusFilter: '',
      sortBy: 'newest',
      currentPage: 1,
      pageSize: 10,
      previewArticleData: null
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.filteredArticles.length / this.pageSize);
    },
    displayedPages() {
      const pages = [];
      const totalDisplayPages = 5; // 最多显示5个页码
      
      if (this.totalPages <= totalDisplayPages) {
        // 如果总页数小于或等于5，显示所有页码
        for (let i = 1; i <= this.totalPages; i++) {
          pages.push(i);
        }
      } else {
        // 显示当前页附近的页码
        let startPage = Math.max(1, this.currentPage - 2);
        let endPage = Math.min(this.totalPages, startPage + totalDisplayPages - 1);
        
        // 调整起始页
        if (endPage - startPage < totalDisplayPages - 1) {
          startPage = Math.max(1, endPage - totalDisplayPages + 1);
        }
        
        for (let i = startPage; i <= endPage; i++) {
          pages.push(i);
        }
      }
      
      return pages;
    },
    renderedPreviewContent() {
      if (!this.previewArticleData) return '';
      
      // 配置marked选项，启用代码高亮
      marked.setOptions({
        highlight: function(code, lang) {
          if (lang && hljs.getLanguage(lang)) {
            return hljs.highlight(code, { language: lang }).value;
          }
          return hljs.highlightAuto(code).value;
        },
        breaks: true
      });
      
      return marked(this.previewArticleData.content || '');
    }
  },
  mounted() {
    this.fetchArticles();
    this.fetchCategories();
  },
  methods: {
    // 获取文章列表
    async fetchArticles() {
      try {
        // 这里替换为实际API调用
        // const response = await articleService.getAll();
        // this.articles = response.data;
        
        // 临时测试数据
        this.articles = [
          {
            id: 1,
            title: '如何使用Java Stream API提高代码可读性',
            content: '# Java Stream API简介\n\nStream API是Java 8引入的一个重要特性，它允许以声明式方式处理集合。\n\n## 主要优点\n\n- 代码更加简洁\n- 支持并行处理\n- 提高代码可读性\n\n```java\n// 传统方式\nList<String> filtered = new ArrayList<>();\nfor (String s : strings) {\n    if (s.startsWith("a")) {\n        filtered.add(s);\n    }\n}\n\n// 使用Stream\nList<String> filtered = strings.stream()\n    .filter(s -> s.startsWith("a"))\n    .collect(Collectors.toList());\n```\n\n## 常用操作\n\n1. filter: 过滤元素\n2. map: 转换元素\n3. sorted: 排序\n4. collect: 收集结果',
            summary: 'Java 8的Stream API是处理集合的强大工具，本文详细介绍了Stream API的使用方法和优势。',
            coverImage: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c',
            categoryId: '1',
            tags: ['Java', 'Stream API', '函数式编程'],
            status: 'published',
            publishTime: '2023-05-15T14:30',
            views: 342,
            comments: 12
          },
          {
            id: 2,
            title: 'Python数据分析入门指南',
            content: '# Python数据分析入门\n\n本文将介绍如何使用Python进行数据分析。\n\n## 必备工具\n\n- pandas\n- numpy\n- matplotlib\n\n## 数据加载示例\n\n```python\nimport pandas as pd\n\n# 加载CSV文件\ndf = pd.read_csv("data.csv")\n\n# 显示前5行\nprint(df.head())\n```',
            summary: '这篇文章介绍了Python中常用的数据分析工具和方法，帮助初学者快速入门。',
            coverImage: 'https://images.unsplash.com/photo-1526379095098-d400fd0bf935',
            categoryId: '2',
            tags: ['Python', '数据分析', 'pandas'],
            status: 'published',
            publishTime: '2023-06-22T09:15',
            views: 287,
            comments: 8
          },
          {
            id: 3,
            title: 'Web前端性能优化技巧',
            content: '# Web性能优化技巧\n\n本文分享一些提升前端性能的实用技巧。\n\n## 资源优化\n\n- 图片压缩\n- CSS和JS的压缩与合并\n- 懒加载\n\n## 代码示例\n\n```javascript\n// 图片懒加载实现\ndocument.addEventListener("DOMContentLoaded", function() {\n  const lazyImages = document.querySelectorAll("img.lazy");\n  \n  const observer = new IntersectionObserver(function(entries, observer) {\n    entries.forEach(function(entry) {\n      if (entry.isIntersecting) {\n        const img = entry.target;\n        img.src = img.dataset.src;\n        img.classList.remove("lazy");\n        observer.unobserve(img);\n      }\n    });\n  });\n  \n  lazyImages.forEach(function(img) {\n    observer.observe(img);\n  });\n});\n```',
            summary: '掌握这些前端性能优化技巧，让你的网站加载更快，用户体验更佳。',
            coverImage: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97',
            categoryId: '3',
            tags: ['前端开发', '性能优化', 'JavaScript'],
            status: 'published',
            publishTime: '2023-07-10T16:45',
            views: 425,
            comments: 15
          },
          {
            id: 4,
            title: 'MySQL数据库索引设计',
            content: '# MySQL索引设计原则\n\n合理的索引设计对数据库性能至关重要。\n\n## 索引类型\n\n- 普通索引\n- 唯一索引\n- 主键索引\n- 复合索引\n\n## 示例SQL\n\n```sql\n-- 创建复合索引\nCREATE INDEX idx_user_name_email ON users(name, email);\n\n-- 分析查询执行计划\nEXPLAIN SELECT * FROM users WHERE name = "John" AND email = "john@example.com";\n```',
            summary: '本文详细讲解MySQL索引的类型、设计原则以及如何优化查询性能。',
            coverImage: 'https://images.unsplash.com/photo-1544383835-bda2bc66a55d',
            categoryId: '4',
            tags: ['MySQL', '数据库', '性能优化'],
            status: 'draft',
            publishTime: null,
            views: 0,
            comments: 0
          }
        ];
        
        this.filterArticles();
      } catch (error) {
        console.error('获取文章列表失败:', error);
      }
    },
    
    // 获取分类列表
    async fetchCategories() {
      try {
        // 这里替换为实际API调用
        // const response = await categoryService.getAll();
        // this.categories = response.data;
        
        // 模拟数据
        this.categories = [
          { id: '1', name: 'Java' },
          { id: '2', name: 'Python' },
          { id: '3', name: '前端开发' },
          { id: '4', name: '数据库' },
          { id: '5', name: '系统架构' }
        ];
      } catch (error) {
        console.error('获取分类失败:', error);
      }
    },
    
    // 筛选文章
    filterArticles() {
      let result = [...this.articles];
      
      // 搜索关键词过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(article => 
          article.title.toLowerCase().includes(query) || 
          article.summary.toLowerCase().includes(query) ||
          (article.tags && article.tags.some(tag => tag.toLowerCase().includes(query)))
        );
      }
      
      // 分类过滤
      if (this.categoryFilter) {
        result = result.filter(article => article.categoryId === this.categoryFilter);
      }
      
      // 状态过滤
      if (this.statusFilter) {
        result = result.filter(article => article.status === this.statusFilter);
      }
      
      // 排序
      result.sort((a, b) => {
        switch (this.sortBy) {
          case 'newest':
            return new Date(b.publishTime || 0) - new Date(a.publishTime || 0);
          case 'oldest':
            return new Date(a.publishTime || 0) - new Date(b.publishTime || 0);
          case 'title':
            return a.title.localeCompare(b.title);
          case 'views':
            return (b.views || 0) - (a.views || 0);
          default:
            return 0;
        }
      });
      
      this.filteredArticles = result;
      this.currentPage = 1; // 重置为第一页
    },
    
    // 预览文章
    previewArticle(article) {
      this.previewArticleData = { ...article };
    },
    
    // 删除文章
    deleteArticle(article) {
      if (confirm(`确定要删除文章 "${article.title}" 吗？此操作不可恢复。`)) {
        try {
          // 这里替换为实际API调用
          // await articleService.delete(article.id);
        
          // 从列表中移除
          this.articles = this.articles.filter(a => a.id !== article.id);
          this.filterArticles();
        } catch (error) {
          console.error('删除文章失败:', error);
        }
      }
    },
    
    // 获取分类名称
    getCategoryName(categoryId) {
      const category = this.categories.find(c => c.id === categoryId);
      return category ? category.name : '未分类';
    },
    
    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '未发布';
      
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN');
    },
    
    // 切换页码
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
      }
  }
}
};
</script>

<style scoped>
.article-list {
  padding: 20px 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--dark-text);
  margin: 0;
}

.primary-btn {
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(67, 97, 238, 0.2);
  text-decoration: none;
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(67, 97, 238, 0.3);
}

.secondary-btn {
  background: #f5f7fb;
  color: var(--dark-text);
  border: 1px solid #e0e0e0;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.secondary-btn:hover {
  background: #e9ecef;
}

/* 筛选栏样式 */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.search-box {
  position: relative;
  width: 300px;
}

.search-box input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border-radius: 30px;
  border: 1px solid #e0e0e0;
  font-size: 14px;
  transition: all 0.3s ease;
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

.search-box i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
}

.filter-controls {
  display: flex;
  gap: 15px;
}

.filter-controls select {
  padding: 8px 15px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background-color: white;
  font-size: 14px;
  cursor: pointer;
}

.filter-controls select:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* 文章表格样式 */
.article-table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 30px;
}

.article-table {
  width: 100%;
  border-collapse: collapse;
}

.article-table th, 
.article-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.article-table th {
  font-weight: 600;
  color: #333;
  background: #f8f9fa;
}

.article-table tr:hover {
  background-color: #f8f9fa;
}

.article-table tr:last-child td {
  border-bottom: none;
}

/* 列宽控制 */
.title-col {
  width: 40%;
}

.category-col,
.date-col,
.status-col {
  width: 12%;
}

.stats-col {
  width: 12%;
}

.actions-col {
  width: 12%;
  text-align: center;
}

/* 文章信息样式 */
.article-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.article-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-details {
  flex-grow: 1;
  overflow: hidden;
}

.article-title {
  font-weight: 600;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tag {
  display: inline-block;
  padding: 3px 8px;
  background-color: #f0f4ff;
  color: #4361ee;
  border-radius: 15px;
  font-size: 12px;
}

.category-badge {
  display: inline-block;
  padding: 5px 10px;
  background-color: #f0f4ff;
  color: #4361ee;
  border-radius: 15px;
  font-size: 12px;
}

.status-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
}

.status-badge.published {
  background-color: #e6f7e6;
  color: #28a745;
}

.status-badge.draft {
  background-color: #f8f9fa;
  color: #6c757d;
}

.stats-info {
  display: flex;
  gap: 15px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.action-buttons button,
.action-buttons a {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  background: none;
  border: 1px solid #e0e0e0;
  color: #666;
  text-decoration: none;
}

.edit-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.preview-btn:hover {
  background: #17a2b8;
  color: white;
  border-color: #17a2b8;
}

.delete-btn:hover {
  background: var(--danger-color);
  color: white;
  border-color: var(--danger-color);
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
}

.empty-state i {
  font-size: 50px;
  color: #ccc;
  margin-bottom: 20px;
}

.empty-state p {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.page-btn {
  display: flex;
  align-items: center;
  padding: 8px 15px;
  border: 1px solid #e0e0e0;
  background: white;
  color: #333;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.page-btn:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #ccc;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-btn.prev {
  margin-right: 15px;
}

.page-btn.next {
  margin-left: 15px;
}

.page-numbers {
  display: flex;
  gap: 5px;
}

.page-number {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0e0e0;
  background: white;
  color: #333;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.page-number:hover:not(.active) {
  background: #f8f9fa;
}

.page-number.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  cursor: default;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

.modal-content {
  position: relative;
  width: 95%;
  max-width: 800px;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  animation: modal-fade-in 0.3s ease;
  max-height: 90vh;
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--dark-text);
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #666;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background-color: #f5f7fb;
  color: var(--danger-color);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding: 15px 20px;
  border-top: 1px solid #f0f0f0;
}

/* 预览模态框样式 */
.preview-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--dark-text);
}

.preview-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
}

.preview-category {
  padding: 3px 10px;
  background-color: #f0f4ff;
  color: #4361ee;
  border-radius: 15px;
}

.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 20px;
}

.preview-content {
  border-top: 1px solid #f0f0f0;
  padding-top: 20px;
}

/* Markdown预览样式 */
.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.markdown-body h1 {
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

.markdown-body h2 {
  font-size: 1.5em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

.markdown-body h3 {
  font-size: 1.25em;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.markdown-body code {
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
}

.markdown-body pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 3px;
}

.markdown-body pre code {
  padding: 0;
  margin: 0;
  background-color: transparent;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .search-box {
    width: 100%;
  }
  
  .filter-controls {
    flex-direction: column;
    gap: 10px;
  }
  
  .article-table {
    display: block;
    overflow-x: auto;
  }
  
  .article-image {
    width: 40px;
    height: 40px;
  }
  
  .stats-col,
  .date-col {
    display: none;
  }
  
  .title-col {
    width: auto;
  }
  
  .modal-content {
    width: 95%;
    max-height: 80vh;
  }
}
</style> 